<template>
  <div class="tabbar">
    <router-link to="/home" tag='div'><i class="iconfont" style="color:#004438">&#x1156;</i><span>首页</span></router-link>
    <router-link to="/message" tag='div'><i class="iconfont" style="color:#004438">&#xe628;</i><span>消息</span></router-link>
    <router-link to="/cart" tag='div'><i class="iconfont" style="color:#004438">&#xe7b1;</i><span>购物</span></router-link>
    <router-link to="/search" tag='div'><i class="iconfont" style="color:#004438">&#xe6ac;</i><span>发现</span></router-link>
    <router-link to="/mine" tag='div'><i class="iconfont" style="color:#004438">&#xe638;</i><span>我的</span></router-link>
  </div>
</template>

<script>
export default {
  name: 'Tabbar'
}
</script>

<style lang="scss" scoped>
@font-face {
  font-family: 'iconfont';  /* project id 1947103 */
  src: url('//at.alicdn.com/t/font_1947103_g4jxlxlh0a.eot');
  src: url('//at.alicdn.com/t/font_1947103_g4jxlxlh0a.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_1947103_g4jxlxlh0a.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_1947103_g4jxlxlh0a.woff') format('woff'),
  url('//at.alicdn.com/t/font_1947103_g4jxlxlh0a.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_1947103_g4jxlxlh0a.svg#iconfont') format('svg');
}
.iconfont{
    font-family:"iconfont" !important;
    font-size:22px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
    }
 .tabbar {
    display: flex;
    height: 60px;
    margin-top: 413px;
   div{
      flex: 1;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
    span{
    text-align: center;
    color: #898587;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 1px;
    opacity: 1;
    margin-top: 2px;
    font-weight: bold;
     }
   }
 }
  .router-link-exact-active, .router-link-active {
      background: #eee;
  }
</style>
